<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="width: 90px; height: 150px;">
        <div class="ant-affix" >
            <ul class="toc demos-anchor">
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Timeline时间轴</h1>
        <section class="markdown">
            <p></p>
            <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2></section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-2-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box expand" id="src-components-Button-demo-primary">
                <section id="J_vue_4g5l7z4b1t6" class="code-box-demo">
                    <div>
<ul class="timeline timeline-inverse">
    <li class="time-label">
        <span class="bg-red">
                          10 Feb. 2014
                        </span>
    </li>
    <li>
        <i class="fa fa-envelope bg-blue"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
            <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
            <div class="timeline-body">
                Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo...
            </div>
            <div class="timeline-footer">
                <a class="btn btn-primary btn-xs">Read more</a>
                <a class="btn btn-danger btn-xs">Delete</a>
            </div>
        </div>
    </li>
    <li>
        <i class="fa fa-user bg-aqua"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>
            <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request
                      </h3>
        </div>
    </li>
    <li>
        <i class="fa fa-comments bg-yellow"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>
            <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
            <div class="timeline-body">
                Take me to your leader! Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!
            </div>
            <div class="timeline-footer">
                <a class="btn btn-warning btn-flat btn-xs">View comment</a>
            </div>
        </div>
    </li>
    <li class="time-label">
        <span class="bg-green">
                          3 Jan. 2014
                        </span>
    </li>
    <li>
        <i class="fa fa-camera bg-purple"></i>
        <div class="timeline-item">
            <span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
            <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
            <div class="timeline-body">
            </div>
        </div>
    </li>
    <li>
        <i class="fa fa-clock-o bg-gray"></i>
    </li>
</ul>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Button-demo-primary">默认样式</a></div>
                    <div>
                         <p>在要应用按钮样式的元素上添加<code>.btn</code>，再设置相应的颜色。</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" ></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;ul class=&quot;timeline timeline-inverse&quot;&gt;
    &lt;li class=&quot;time-label&quot;&gt;
        &lt;span class=&quot;bg-red&quot;&gt;
                          10 Feb. 2014
                        &lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;i class=&quot;fa fa-envelope bg-blue&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;timeline-item&quot;&gt;
            &lt;span class=&quot;time&quot;&gt;&lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt; 12:05&lt;/span&gt;
            &lt;h3 class=&quot;timeline-header&quot;&gt;&lt;a href=&quot;#&quot;&gt;Support Team&lt;/a&gt; sent you an email&lt;/h3&gt;
            &lt;div class=&quot;timeline-body&quot;&gt;
                Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo...
            &lt;/div&gt;
            &lt;div class=&quot;timeline-footer&quot;&gt;
                &lt;a class=&quot;btn btn-primary btn-xs&quot;&gt;Read more&lt;/a&gt;
                &lt;a class=&quot;btn btn-danger btn-xs&quot;&gt;Delete&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;i class=&quot;fa fa-user bg-aqua&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;timeline-item&quot;&gt;
            &lt;span class=&quot;time&quot;&gt;&lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt; 5 mins ago&lt;/span&gt;
            &lt;h3 class=&quot;timeline-header no-border&quot;&gt;&lt;a href=&quot;#&quot;&gt;Sarah Young&lt;/a&gt; accepted your friend request
                      &lt;/h3&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;i class=&quot;fa fa-comments bg-yellow&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;timeline-item&quot;&gt;
            &lt;span class=&quot;time&quot;&gt;&lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt; 27 mins ago&lt;/span&gt;
            &lt;h3 class=&quot;timeline-header&quot;&gt;&lt;a href=&quot;#&quot;&gt;Jay White&lt;/a&gt; commented on your post&lt;/h3&gt;
            &lt;div class=&quot;timeline-body&quot;&gt;
                Take me to your leader! Switzerland is small and neutral! We are more like Germany, ambitious and misunderstood!
            &lt;/div&gt;
            &lt;div class=&quot;timeline-footer&quot;&gt;
                &lt;a class=&quot;btn btn-warning btn-flat btn-xs&quot;&gt;View comment&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=&quot;time-label&quot;&gt;
        &lt;span class=&quot;bg-green&quot;&gt;
                          3 Jan. 2014
                        &lt;/span&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;i class=&quot;fa fa-camera bg-purple&quot;&gt;&lt;/i&gt;
        &lt;div class=&quot;timeline-item&quot;&gt;
            &lt;span class=&quot;time&quot;&gt;&lt;i class=&quot;fa fa-clock-o&quot;&gt;&lt;/i&gt; 2 days ago&lt;/span&gt;
            &lt;h3 class=&quot;timeline-header&quot;&gt;&lt;a href=&quot;#&quot;&gt;Mina Lee&lt;/a&gt; uploaded new photos&lt;/h3&gt;
            &lt;div class=&quot;timeline-body&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;i class=&quot;fa fa-clock-o bg-gray&quot;&gt;&lt;/i&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
</article>